<template>
  <div class="containerBox">
    <button class="back" v-show="$store.state.isDetail" @click="back">返回</button>
    <div v-show="!$store.state.isDetail" class="topSearch">
      <span>商品名称</span>
      <el-input placeholder="请输入" type="text" v-model="goodsName"></el-input>
      <span>评价时间</span>
      <el-date-picker
        v-model="startStop"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <span>评分</span>
      <el-select v-model="score" placeholder="请选择" width="50px">
        <el-option label="1" value="1"></el-option>
        <el-option label="2" value="2"></el-option>
        <el-option label="3" value="3"></el-option>
        <el-option label="4" value="4"></el-option>
        <el-option label="5" value="5"></el-option>
      </el-select>
      <el-button class="search">搜索</el-button>
    </div>
    <div v-show="!$store.state.isDetail" class="tableList">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column label="评价内容" width="400px">
          <template slot-scope="scope">
            <div class="evaluateContent" v-html="scope.row.evaluateContent.content"></div>
            <ul class="evaluateContent" v-if="scope.row.evaluateContent.pictures">
              <li v-for="item in scope.row.evaluateContent.pictures" :key="item.id">
                <div class="flex">
                  <img :src="item.url" alt="">
                </div>
              </li>
            </ul>
          </template>
        </el-table-column>
        <el-table-column prop="evaluateUser" label="评价用户"></el-table-column>
        <el-table-column prop="evaluateScore" label="评分"></el-table-column>
        <el-table-column prop="evaluateDate" label="评论时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="check(scope.row)">查看订单</a>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
      </el-pagination>
    </div>
    <router-view v-show="$store.state.isDetail"></router-view>
  </div>
</template>

<script>
export default {
  name: 'goodsEvaluate',
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 搜索条件
      goodsName: '',
      startStop: '',
      score: 1,
      //
      tableData: [
        {
          goodsName: '皇家 全犬粮15kg',
          evaluateContent: {
            content: '<p>这是一条评论内容</p>',
            pictures: [
              {
                id: 1314,
                url: 'http://images.gchongpet.com/1544408918091'
              }, {
                id: 1315,
                url: 'http://images.gchongpet.com/1544408918091'
              }, {
                id: 1316,
                url: 'http://images.gchongpet.com/1544408918091'
              }, {
                id: 1317,
                url: 'http://images.gchongpet.com/1544408918091'
              }, {
                id: 1318,
                url: 'http://images.gchongpet.com/1544408918091'
              }, {
                id: 1319,
                url: 'http://images.gchongpet.com/1544408918091'
              }, {
                id: 1310,
                url: 'http://images.gchongpet.com/1544408918091'
              }
            ]
          },
          evaluateUser: '馮寳寳',
          evaluateScore: '1',
          evaluateDate: '2018.10.15 15:22'
        }, {
          goodsName: '皇家 全犬粮15kg',
          evaluateContent: {
            content: '<p>这是一条评论内容</p>',
            pictures: null
          },
          evaluateUser: '馮寳寳',
          evaluateScore: '1',
          evaluateDate: '2018.10.15 15:22'
        }
      ]
    }
  },
  mounted () {
    this.$store.commit('isDetailFn', false)
  },
  methods: {
    back () {
      this.$store.commit('isDetailFn', false)
      this.$router.push({name: 'goodsEvaluate'})
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    operation (type) {
      if (type === 'modify') {
        this.$message({
          type: 'info',
          message: '修改'
        })
      } else if (type === 'delete') {
        this.$message({
          type: 'info',
          message: '删除'
        })
      } else if (type === 'upper') {
        this.$message({
          type: 'info',
          message: '上架'
        })
      } else if (type === 'lower') {
        this.$message({
          type: 'info',
          message: '下架'
        })
      }
    },
    handleSizeChange (val) {
      console.log(val)
      console.log(`每页 ${val} 条`)
      this.pageSize = val
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    check (row) {
      this.$router.push({
        name: 'evaluateDetail'
      })
      this.$store.commit('isDetailFn', true)
      console.log(this.$store.state.isDetail)
      this.$message({
        type: 'info',
        message: '查看订单'
      })
    }
  }
}
</script>

<style scoped lang="less">
  .containerBox {
    .topSearch {
      /deep/ .el-select .el-input {
        width: 60px;
      }
      /deep/ .el-range-input {
        width: 140px;
      }
      /deep/ .el-date-editor {
        width: 330px;
      }
    }
    .tableList {
      /deep/ .el-table .cell {
        color: #000;
        font-weight: normal;
        text-align: center;
        line-height: 25px;
      }
      /deep/ .el-table__body-wrapper tbody tr * {
        font-size: 14px;
      }
      /deep/ .el-table__body-wrapper tbody tr td .cell .tagS {
        border: 1px solid #c7c7c7;
        padding: 5px;
        margin-bottom: 5px;
        margin-right: 5px;
      }
      /deep/ .el-table__body-wrapper tbody tr td .cell a.oper {
        color: #008fff;
      }
      .el-pagination {
        margin-top: 40px;
        text-align: center;
      }
      .pagination /deep/ * {
        font-size: 16px;
      }
      div.evaluateContent{
        line-height:30px;
        max-height:150px;
        overflow: hidden;
      }
      ul.evaluateContent{
        text-align: center;
        li{
          background: #f5f5f5;
          width:70px;
          height:70px;
          margin:5px;
          div{
            width:100%;
            height:100%;
            img{
              max-width:100%;
              max-height:100%;
            }
          }
        }
      }
    }
  }

</style>
